<script setup lang="ts">
import { ref } from "vue";
import guanzhu from "./guanzhu.vue";
import quanzi from "./quanzi.vue";
import faxian1 from "./faxian1.vue";
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const imgList = ref<string[]>([
  "https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg",
  "https://gitcode.net/qq_44112897/images/-/raw/master/comic/40.jpg",
  "https://gitcode.net/qq_44112897/images/-/raw/master/comic/15.jpg",
]);
const navIndex = ref(0);
const checkIndex = async (index: number) => {
  console.log(index);
  navIndex.value = index;
};
</script>

<template>
  <view class="boxs">
    <view class="header">
      <navigator url="/pages/" class="left" open-type="switchTab"
        >社区</navigator
      >
      <view class="mid">
        <view class="search-box">
          <img src="@/static/images/search@2x.png" alt="" class="search-img" />
          <input type="text" placeholder="关键词搜索" class="search-input" />
        </view>
      </view>
      <view class="right">
        <img src="@/static/images/mail@2x.png" class="email-img" />
      </view>
    </view>
    <view v-if="navIndex == 1">
      <swiper
        :autoplay="false"
        interval="true"
        duration="500"
        :circular="true"
        indicator-dots="true"
        class="subfloat_pictures"
      >
        <swiper-item v-for="(image, index) in imgList" :key="index">
          <image :src="image" mode="aspectFill" class="cannaserver" />
        </swiper-item>
      </swiper>
    </view>
    <!-- diy -->
    <view class="heads">
      <view class="head-nav">
        <view :class="navIndex == 0 ? 'activite' : ''" @click="checkIndex(0)"
          >关注</view
        >
        <view :class="navIndex == 1 ? 'activite' : ''" @click="checkIndex(1)"
          >发现</view
        >
        <view :class="navIndex == 2 ? 'activite' : ''" @click="checkIndex(2)"
          >圈子</view
        >
      </view>
    </view>
    <scroll-view scroll-y class="scroll-view" refresher-enabled>
      <view class="content1" v-if="navIndex == 0">
        <guanzhu></guanzhu>
      </view>
      <view class="content2" v-if="navIndex == 1">
        <faxian1></faxian1>
      </view>
      <view class="content3" v-if="navIndex == 2">
        <quanzi></quanzi>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}

.boxs {
  width: 100%;
  height: 100%;
  // position: relative;
  display: flex;
  flex-direction: column;
}

.viewport {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.header {
  display: flex;
  height: 92rpx;
  margin: 0 64rpx;
  margin-top: 150rpx;
  background-color: #fff;

  .left {
    margin-top: 0;
    display: flex;
    align-items: center;
    flex-grow: 1;
    font-size: 30rpx;
    font-family: Inter, Inter-700;
    font-weight: 700;
    text-align: CENTER;
    color: #f2bb16;
  }

  .mid {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .search-box {
      display: flex;
      align-items: center;
      width: 452rpx;
      height: 70rpx;
      background: #fffaec;
      border-radius: 20rpx;
      box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.15);

      .search-img {
        width: 34rpx;
        height: 34rpx;
        margin-left: 18rpx;
        margin-right: 10rpx;
      }

      .search-input {
        font-size: 30rpx;
        font-weight: 400;

        &::placeholder {
          color: #000000 26%;
        }
      }
    }
  }

  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;

    .email-img {
      width: 48rpx;
      height: 48rpx;
    }
  }
}

.head-nav {
  /* margin: 24rpx 64rpx; */
  margin-top: 24rpx;
  margin-left: 64rpx;
  margin-right: 368rpx;
  height: 74rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC-500;
  font-weight: 500;
  text-align: LEFT;
  color: #949090;
  line-height: 38rpx;
}

.activite {
  display: flex;
  color: #000000;
  text-decoration: underline;
  text-decoration-color: #f2bb16;
  font-weight: bolder 30rpx;
  text-underline-offset: 10rpx;
}

.head-nav > view {
  padding-bottom: 10rpx;
}

// 轮播
.subfloat_pictures {
  display: flex;
  margin-top: 24rpx;
  margin-left: 64rpx;
  align-items: center;
  width: 632rpx;
  height: 150rpx;
  overflow: hidden;
  border-radius: 20rpx;
  box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

  .cannaserver {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 632rpx;
    height: 150rpx;
    border-radius: 20rpx;
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
  }
}
</style>
